<!-- 添加候选人简历 -->
<template>
  <div class="context_box">
    <div class="reg_middle">
      <div class="reg_middle_in" v-for="(item, i) in inputArr" :key="i">
        <div class="reg_middle_in_title">
          <!-- <span class="cnicered">*{{item.placeholder}}</span> -->
        </div>
        <div class="reg_middle_in_input sbFlex bm">
          <div class="reg_middle_in_input_l">{{ item.lable }}</div>
          <div
            class="reg_middle_in_input_r flex"
            @click="item.btn ? (selectPageShow = true) : 1 + 1"
          >
            <input
              :type="item.type || 'text'"
              :disabled="item.btn"
              v-model="inputFrom[item.key]"
              :placeholder="item.placeholder"
            />
            <div class="icon cenFlex" v-if="item.btn">
              <van-icon name="play" size="20px" />
            </div>
          </div>
        </div>
      </div>
      <div class="reg_middle_img">
        <div class="reg_middle_img_title">备注</div>
        <div class="reg_middle_bottom obox">
          <textarea
            placeholder="请输入候选人的备注"
            v-model="inputFrom.remask"
          ></textarea>
        </div>
      </div>
      <div class="reg_middle_checked flex" @click="checkedShow = !checkedShow">
        <div class="reg_middle_checked_l">
          <van-icon
            name="checked"
            size="26"
            :color="checkedShow ? '#25B3D6' : '#828482'"
          />
        </div>
        <div class="reg_middle_checked_r">已将简历上传至Moka招聘系统</div>
      </div>
      <div class="all_btn cenFlex reg_middle_btn btnR" @click="regEnd">
        确认添加
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/resume.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      inputArr: [
        {
          lable: "姓名",
          placeholder: "请输入候选人的姓名",
          key: "candidate",
          btn: false,
        },
        {
          lable: "联系电话",
          placeholder: "请输入候选人的电话号码",
          key: "phone",
          btn: false,
          type: "number",
        },
      ],
      inputFrom: {
        phone: "",
        candidate: "",
        remark: "",
      },
      checkedShow: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //   点击确认添加简历
    regEnd() {
      if (!this.checkedShow) {
        this.$dialog
          .alert({
            confirmButtonText: "我知道了",
            confirmButtonColor: "#3AD2CE",
            message: "请先确认已将简历上传至Moka招聘系统",
          })
          .then(() => {
            // on close
          });
        return;
      }
      api.addResume(this.inputFrom).then((res) => {
        if (res.code == 0) {
          this.$router.go(-1);
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.reg_middle {
  padding: 0px 20px;
  .reg_middle_in_title {
    font-size: 12px;
    height: 28px;
    display: flex;
    align-items: center;
  }
  .reg_middle_in_input {
    height: 35px;
    width: 100%;
    padding-bottom: 5px;

    align-items: flex-end;
    .reg_middle_in_input_l {
      font-size: 16px;
      color: $grayColor;
      min-width: 70px;
    }
    .reg_middle_in_input_r {
      width: 100%;
      height: 100%;
      text-align: right;
      input {
        text-align: right;
      }
      .icon {
        transform: rotate(90deg);
      }
    }
  }
}
.reg_middle_checked {
  align-items: center;
  margin-top: 20px;
  .reg_middle_checked_l {
    margin-right: 10px;
  }
}
.reg_middle_img {
  font-size: 16px;
  color: $grayColor;
  padding: 40px 0px;
  padding-bottom: 0px;
  .reg_middle_img_updata {
    padding: 10px 0px;
  }
  .reg_middle_img_subtitle {
    font-size: 10px;
    white-space: nowrap;
    span {
      transform: scale(0.7);
    }
  }
  ::v-deep .van-uploader__preview-delete-icon {
    color: #fff;
  }
  .reg_middle_bottom {
    widows: 100%;
    height: 186px;
    border: 1px solid rgba(130, 132, 130, 0.57);
    margin-top: 10px;
    textarea {
      width: 100%;
      height: 100%;
      padding: 15px 10px;
      color: #333;
      font-size: 18px;
    }
  }
}
.reg_middle_btn {
  margin-top: 20px;
  height: 54px;
}
</style>